<template>
  <el-form class="add-event-msg" v-if="wbData">
    <input-normal label="发送用户uid" tooltips="可以是空(登录用户uid)，也可以指定用户uid" placeholder="可以是空(登录用户uid)，也可以指定用户uid" v-model="wbData.send_uid" @change="onUpdateWbComponent"></input-normal>
    <input-normal label="关联组件id" tooltips="获取发送用户uid关联组件id" placeholder="获取发送用户uid关联组件id" v-model="wbData.rec_uid" @change="onUpdateWbComponent"></input-normal>
    <!-- <input-normal label="关联组件id" v-model="wbData.compId" @change="onUpdateWbComponent"></input-normal> -->
    <div class="lists margin-bottom-10 margin-left-right-16">
      <el-button type="primary"  @click.stop="onAddWbItem" class="margin-bottom-10"><el-icon><i class="jy-icon-plus"></i></el-icon>增加随机文案</el-button>
      <el-collapse v-model="activeNames" class="drag-list">
        <div v-for="(item, index) in eventWbLists" :key="'drag_'+index" class="item">
          <input-normal v-model="eventWbLists[index]" :label="'选项' + (index+1)" class="input" @change="onUpdateWbItem(index)"></input-normal>
          <i class="jy-icon-close" @click.stop="onDeleteWbItem($event, index)"></i>
        </div>
      </el-collapse>
    </div>
  </el-form>
</template>

<script setup lang="ts">
import { useWebControlsStore } from '@/store/web/controls'
import { useWebComponentStore } from '@/store/web/component'
import { getWbListByItem } from '@/components/utils'
import { WbComponentDatas } from '@/const/web/'

const props = defineProps<{ 
  event: IEvent,
  index: number,
}>()

const event = props.event
const useWebControls = useWebControlsStore()
const useWebComponent = useWebComponentStore()
const activeNames = [1]

let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})

let wbData_: any
const wbData = computed(() => {
  try {
    wbData_ = useWebControls.currentControls![event.controlId] && useWebControls.currentControls![event.controlId].data
  } catch (error) {
    console.log("controlData.data null")
  }
  return wbData_
})
let wbLists_: any[]
const eventWbLists = computed(() => {
  wbData_ = useWebControls.currentControls![event.controlId] && useWebControls.currentControls![event.controlId].data
  if(wbData_ && wbData_.elements) {
    wbLists_ = wbData_.elements
  }
  return wbLists_
})
const onUpdateWbComponent = () => {
  useWebControls.updateWbComponent({ controlId: event.controlId, data: wbData_ })
}
const onAddWbItem = () => {
  const controlId = event.controlId
  let item: any
  const wbList = getWbListByItem(useWebComponent.currentComponentData!)
  if(wbList[0]) {
    item = _.cloneDeep(wbList[0])
    item.mid = ''
  } else {
    item = _.cloneDeep(WbComponentDatas[event.controlId].data.elements[0])
  }
  useWebControls.addWbComponentItem({controlId, item})
}
const onDeleteWbItem = (e: any, index: number) => {
  e.stopPropagation()
  e.preventDefault()
  const params = {controlId: event.controlId, index}
  useWebControls.deleteWbComponentItem(params)
}
const onUpdateWbItem = (index: number) => {
  const controlId = event.controlId
  const wbList = getWbListByItem(useWebComponent.currentComponentData!)
  const params = {item: wbList[index], index, controlId}
  useWebControls.updateWbComponentItem(params)
}
</script>